<template>
  <div class="home">
    <div class="arrange">
      <div class="row1">
        <div class="row1_column1">
          <div class="safety">
            <img src="../assets/images/safety.png" alt="" />
            <span>安全</span>
          </div>
          <div class="navigation">
            <div class="nav1">
              <div class="circle1"></div>
              <span>损工事件</span>
            </div>
            <div class="nav1">
              <div class="circle2"></div>
              <span>医疗事件数</span>
            </div>
            <div class="nav1">
              <div class="circle3"></div>
              <span>急救事件数</span>
            </div>
            <div class="nav1">
              <div class="circle4"></div>
              <span>未遂事件数</span>
            </div>
            <div class="nav1">
              <div class="circle5"></div>
              <span>安全生产天数</span>
            </div>
          </div>
          <!-- <div ref="barCharts17" style="height: 300px; width: 100%"></div> -->
          <div class="image">
            <img src="../assets/images/jinzita.png" alt="" />
          </div>
          <div class="img_line">
            <div class="image_line">
              <div class="image_class1"></div>
              <span>0</span>
            </div>
            <div class="image_line1">
              <div class="image_class2"></div>
              <span>0</span>
            </div>
            <div class="image_line2">
              <div class="image_class3"></div>
              <span>0</span>
            </div>
            <div class="image_line3">
              <div class="image_class4"></div>
              <span>0</span>
            </div>
            <div class="image_line4">
              <div class="image_class5"></div>
              <span>{{ this.num }}</span>
            </div>
          </div>

          <div class="safe">
            <table>
              <tbody>
                <tr v-for="(item, index) in tablelist" :key="index">
                  <td
                    v-for="(q, i) in item"
                    :key="i"
                    :style="{ background: q.color, color: q.textColor }"
                  >
                    {{ q.name }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="row1_column2">
          <div class="energy">
            <img src="../assets/images/energy.png" alt="" />
            <span>绿色能源（KW/h）</span>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              height: 90px;
              padding-top: 10px;
            "
          >
            <div ref="barCharts3" style="height: 100px; width: 30%"></div>
            <div ref="barCharts4" style="height: 100px; width: 30%"></div>
            <div ref="barCharts5" style="height: 100px; width: 30%"></div>
            <div ref="barCharts6" style="height: 100px; width: 30%"></div>
            <div ref="barCharts7" style="height: 100px; width: 30%"></div>
          </div>
          <div class="dianliang">
            <div>年总耗电量</div>
            <div>年绿色电量</div>
            <div>当月耗电量</div>
            <div style="width: 30%">当月绿色电量</div>
            <div>年度占比</div>
          </div>
          <div ref="barCharts11" style="height: 200px"></div>
        </div>
        <div class="row1_column3">
          <div class="vehicle">
            <img src="../assets/images/vehicle.png" alt="" />
            <span>来料车辆预约管理</span>
          </div>
          <div class="car">
            <div class="card" v-for="(item, index) in list" :key="index">
              <img :src="item.image" alt="" />
              <div class="text">
                <div>{{ item.title }}</div>
                <div
                  style="padding-top: 9px; font-size: 23px"
                  v-if="item.num >= 0"
                >
                  {{ item.num }}
                </div>
                <div style="padding-top: 9px; font-size: 23px" v-else>
                  <span v-if="item.title == '已到位车辆'">
                    {{ list[2].num + list[5].num }}
                  </span>
                  <span v-else>
                    {{
                      ((list[2].num + list[5].num) / list[1].num).toFixed(2) *
                      100
                    }}%
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row2">
        <div class="row2_column1">
          <iframe
            src="https://fall.wlhn.com/fallapp-vue-wlhn-tlct/line_map.html?areaId=delixiarea&uname=wzmes&pwd=wzmes.147&backgroundColor=transparent&mapBackgroundColor=white"
            style="width: 100%; height: 100%; border: 0"
          ></iframe>
        </div>
        <div class="row2_column2">
          <div class="chanchu">
            <div class="output">
              <img src="../assets/images/output.png" alt="" />
              <span>主平台产出数</span>
            </div>
            <!-- <div ref="barCharts12" style="height: 300px"></div> -->
            <el-carousel
              indicator-position="none"
              arrow="never"
              interval="5000"
            >
              <el-carousel-item>
                <div class="output_name">DZ47V</div>
                <div ref="barCharts12" style="height: 300px"></div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="output_name">DZ47V</div>
                <div ref="barCharts122" style="height: 300px"></div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="output_name">DZ47V</div>
                <div ref="barCharts123" style="height: 300px"></div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="output_name">DZ47V</div>
                <div ref="barCharts124" style="height: 300px"></div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="output_name">DZ47V</div>
                <div ref="barCharts125" style="height: 300px"></div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="output_name">DZ47V</div>
                <div ref="barCharts126" style="height: 300px"></div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="chanchu1">
            <div class="wanchenglv">
              <div class="order">
                <img src="../assets/images/order.png" alt="" />
                <span>订单完成率</span>
              </div>
              <div
                style="
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  align-items: center;
                "
              >
                <div ref="barCharts" style="height: 150px; width: 30%"></div>
                <div ref="barCharts1" style="height: 150px; width: 30%"></div>
                <div ref="barCharts2" style="height: 150px; width: 30%"></div>
              </div>
            </div>
            <div class="yichang">
              <div class="abnormal">
                <img src="../assets/images/abnormal.png" alt="" />
                <span>订单异常</span>
              </div>
              <div class="table">
                <table>
                  <thead>
                    <tr>
                      <td>序号</td>
                      <td>物料描述</td>
                      <td>批次数量</td>
                      <td>优先级</td>
                      <td>计划产线</td>
                      <td>异常原因</td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in tbodylist11" :key="index">
                      <td>{{ item.num }}</td>
                      <td>
                        <div class="line">{{ item.describe }}</div>
                      </td>
                      <td>{{ item.number }}</td>
                      <td>{{ item.priority }}</td>
                      <td>{{ item.plan }}</td>
                      <td>{{ item.abnormal }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row3">
        <div class="row3_column1">
          <div class="column1">
            <div class="title">
              <img src="../assets/images/FPY.png" alt="" />
              <span>FPY</span>
            </div>
            <div
              style="
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                margin-top: -15px;
              "
            >
              <div ref="barCharts8" style="height: 140px; width: 30%"></div>
              <div ref="barCharts9" style="height: 140px; width: 30%"></div>
              <div ref="barCharts10" style="height: 140px; width: 30%"></div>
            </div>
            <div class="peo">
              <div style="margin-left: 5px; width: 20%">终端</div>
              <div style="margin-left: 9px; width: 20%">工控</div>
              <div style="margin-left: 10px; width: 20%">部件</div>
            </div>
          </div>
          <div class="column2">
            <div class="title">
              <img src="../assets/images/FPY.png" alt="" />
              <span>MDR（ppm）</span>
            </div>
            <div ref="barCharts13" style="height: 200px"></div>
          </div>
        </div>
        <div class="row3_column2">
          <div class="column1">
            <div class="title">
              <img src="../assets/images/OEE.png" alt="" />
              <span>OEE</span>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-around;
                width: 100%;
                padding-top: 25px;
              "
            >
              <div class="neibu">
                <div ref="barCharts14" style="height: 150px; width: 100%"></div>
                <div
                  ref="barCharts141"
                  style="
                    height: 160px;
                    width: 100%;
                    position: absolute;
                    top: -2%;
                    z-index: -99;
                  "
                ></div>
                <div class="quan">
                  <div class="yuan"></div>
                </div>
              </div>
              <div class="neibu">
                <div ref="barCharts15" style="height: 150px; width: 100%"></div>
                <div
                  ref="barCharts151"
                  style="
                    height: 160px;
                    width: 100%;
                    position: absolute;
                    top: -2%;
                    z-index: -99;
                  "
                ></div>
                <div class="quan">
                  <div class="yuan"></div>
                </div>
              </div>
              <div class="neibu">
                <div ref="barCharts16" style="height: 150px; width: 100%"></div>
                <div
                  ref="barCharts161"
                  style="
                    height: 160px;
                    width: 100%;
                    position: absolute;
                    top: -2%;
                    z-index: -99;
                  "
                ></div>
                <div class="quan">
                  <div class="yuan"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="column2">
            <div class="title">
              <img src="../assets/images/temperature.png" alt="" />
              <span>温湿度</span>
            </div>
            <div class="temperature">
              <div class="box">
                <div ref="myCharts" style="width: 200px; height: 150px"></div>
                <div class="dizuo"></div>
              </div>
              <div class="box" style="margin-left: -7%">
                <div ref="myCharts1" style="width: 250px; height: 150px"></div>
                <div class="dizuo1"></div>
              </div>
            </div>
            <div class="tem">
              <div style="margin-left: -68px">温度</div>
              <div style="margin-left: -28px">湿度</div>
            </div>
          </div>
        </div>
        <div class="row3_column3">
          <div class="column1">
            <div class="title">
              <img src="../assets/images/people.png" alt="" />
              <span>在岗人数</span>
            </div>
            <div class="people">
              <div ref="barCharts19" style="height: 130px; width: 200px"></div>
              <div ref="barCharts20" style="height: 130px; width: 200px"></div>
              <div ref="barCharts21" style="height: 130px; width: 200px"></div>
            </div>
            <div class="peo">
              <div style="margin-left: 3px">终端</div>
              <div style="margin-left: 40px">工控</div>
              <div style="margin-left: 39px">部件</div>
            </div>
          </div>
          <div class="column2">
            <div class="title">
              <img src="../assets/images/AODON.png" alt="" />
              <span>Andon</span>
            </div>
            <div class="table">
              <table>
                <thead>
                  <tr>
                    <td>日期</td>
                    <td>时间</td>
                    <td>工厂</td>
                    <td>报警产线</td>
                    <td>警报状态</td>
                    <td>类型</td>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in tbodylist12" :key="index">
                    <td>{{ item.date }}</td>
                    <td>{{ item.time }}</td>
                    <td>{{ item.factory }}</td>
                    <td>
                      <div class="line">{{ item.line }}</div>
                    </td>
                    <td
                      :class="
                        index == 0 ? 'state' : index == 1 ? 'state1' : 'state2'
                      "
                    >
                      {{ item.state }}
                    </td>
                    <td><img :src="item.img" alt="" /></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import echarts from "echarts";
import "echarts-gl";

export default {
  data() {
    return {
      tablelist: [
        [
          { color: "rgb(231,229,232)", name: "1", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "2", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "3", textColor: "#000" },
        ],
        [
          { color: "rgb(231,229,232)", name: "4", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "5", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "6", textColor: "#000" },
        ],
        [
          { color: "rgb(231,229,232)", name: "7", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "8", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "9", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "10", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "11", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "12", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "13", textColor: "#000" },
        ],
        [
          { color: "rgb(231,229,232)", name: "14", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "15", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "16", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "17", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "18", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "19", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "20", textColor: "#000" },
        ],
        [
          { color: "rgb(231,229,232)", name: "21", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "22", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "23", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "24", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "25", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "26", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "27", textColor: "#000" },
        ],
        [
          { color: "rgb(231,229,232)", name: "28", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "29", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "30", textColor: "#000" },
        ],
        [
          { color: "rgb(231,229,232)", name: "31", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "", textColor: "#000" },
          { color: "rgb(231,229,232)", name: "", textColor: "#000" },
        ],
      ],
      model: "50.8%",
      model1: "50.8%",
      model2: "50.8%",
      list: [
        {
          image: require("../assets/images/car1.png"),
          title: "当前园区车辆",
          num: Math.round(Math.random() * 13 + 35),
        },
        {
          image: require("../assets/images/car2.png"),
          title: "总预约车辆",
          num: Math.round(Math.random() * 30 + 180),
        },
        {
          image: require("../assets/images/car3.png"),
          title: "准时送货车辆",
          num: Math.round(Math.random() * 20 + 180),
        },
        {
          image: require("../assets/images/car4.png"),
          title: "已到位车辆",
        },
        {
          image: require("../assets/images/car5.png"),
          title: "车位周转率",
        },
        {
          image: require("../assets/images/car6.png"),
          title: "延期车辆",
          num: 0,
        },
      ],
      tbodylist: [
        {
          num: 1,
          describe: "CDB3w C 1568",
          number: 4320,
          priority: "Y1-3",
          plan: "DZ47SBZ13",
          abnormal: "欠料",
        },
        {
          num: 2,
          describe: "CDB3w C 1568",
          number: 4320,
          priority: "Y1-3",
          plan: "DZ47SBZ13",
          abnormal: "欠料",
        },
        {
          num: 3,
          describe: "1111111111111",
          number: 4320,
          priority: "Y1-3",
          plan: "DZ47SBZ13",
          abnormal: "欠料",
        },
      ],
      tbodylist1: [
        {
          date: "06/17",
          time: "13:56",
          factory: "终端厂",
          line: "DZ47S-125包装123",
          state: "异常 待确认",
          img: require("../assets/images/equipment.png"),
          img_id: 1,
        },
        {
          date: "06/17",
          time: "13:56",
          factory: "终端厂",
          line: "DZ47S-125包装123",
          state: "异常 待确认",
          img: require("../assets/images/quality.png"),
          img_id: 2,
        },
        {
          date: "06/17",
          time: "13:56",
          factory: "终端厂",
          line: "DZ47S-125包装123",
          state: "异常 待确认",
          img: require("../assets/images/production.png"),
          img_id: 3,
        },
      ],
      tbodylist11: [],
      tbodylist12: [],

      zptdz47s: 2311,
      zptdz47sle: 375,
      zptdz47125: 625,
      zptdz47le125: 74,
      zptcjx2s: 1090,
      zptcdc19s: 45,

      lsny_arr1: [
        Math.round(Math.random() * 307 + 4893),
        Math.round(Math.random() * 307 + 4893),
        Math.round(Math.random() * 307 + 4893),
        Math.round(Math.random() * 307 + 4893),
        Math.round(Math.random() * 307 + 4893),
        Math.round(Math.random() * 307 + 4893),
        Math.round(Math.random() * 307 + 4893),
      ],
      lsny_arr2: [
        Math.round(Math.random() * 2000 + 30000),
        Math.round(Math.random() * 2000 + 30000),
        Math.round(Math.random() * 2000 + 30000),
        Math.round(Math.random() * 2000 + 30000),
        Math.round(Math.random() * 2000 + 30000),
        Math.round(Math.random() * 2000 + 30000),
        Math.round(Math.random() * 2000 + 30000),
      ],
      lsny_arr3: [
        Math.round(Math.random() * 307 + 4893),
        Math.round(Math.random() * 307 + 4893),
        Math.round(Math.random() * 307 + 4893),
        Math.round(Math.random() * 307 + 4893),
        Math.round(Math.random() * 307 + 4893),
        Math.round(Math.random() * 307 + 4893),
        Math.round(Math.random() * 307 + 4893),
      ],
      lsny_arr4: [
        Math.round(Math.random() * 2000 + 30000),
        Math.round(Math.random() * 2000 + 30000),
        Math.round(Math.random() * 2000 + 30000),
        Math.round(Math.random() * 2000 + 30000),
        Math.round(Math.random() * 2000 + 30000),
        Math.round(Math.random() * 2000 + 30000),
        Math.round(Math.random() * 2000 + 30000),
      ],

      lsny_nhdzl: 6810000,
      lsny_lsdl: 221480,
      lsny_dyhdl: 510750,
      lsny_dylsdl: 99666,

      ddwcl_zd: Math.round(Math.random() * 5 + 90),
      ddwcl_gk: Math.round(Math.random() * 5 + 90),
      ddwcl_bj: Math.round(Math.random() * 5 + 90),

      fpy_zd: Math.round(Math.random() * 34 + 923) / 10,
      fpy_gk: Math.round(Math.random() * 32 + 913) / 10,
      fpy_bj: Math.round(Math.random() * 17 + 953) / 10,

      mdr_arr: [
        Math.round(Math.random() * 5000 + 52000),
        Math.round(Math.random() * 2000 + 45000),
        Math.round(Math.random() * 3000 + 32000),
      ],

      oee_zd: Math.round(Math.random() * 5 + 85) / 100,
      oee_gk: Math.round(Math.random() * 6 + 87) / 100,
      oee_bj: Math.round(Math.random() * 3 + 88) / 100,

      num: "",
    };
  },
  mounted() {
    let date = new Date().getDate();
    localStorage.setItem("date", date);

    for (let i = 0; i < this.tablelist.length; i++) {
      let e = this.tablelist[i];
      for (let j = 0; j < e.length; j++) {
        let a = e[j];
        if (a.name <= date) {
          this.tablelist[i][j].color = "rgb(160,212,173)";
          this.tablelist[i][j].textColor = "#fff";
        } else {
          break;
        }
      }
    }
    this.num = date;

    this.drawChart141();
    this.drawChart151();
    this.drawChart161();

    this.drawChart();
    this.drawChart1();
    this.drawChart2();
    this.drawChart3();
    this.drawChart4();
    this.drawChart5();
    this.drawChart6();
    this.drawChart7();
    this.drawChart8();
    this.drawChart9();
    this.drawChart10();
    this.drawChart11();

    this.drawChart13();
    this.drawChart14();
    this.drawChart15();
    this.drawChart16();

    // this.drawChart17();
    this.drawChart19();
    this.drawChart20();
    this.drawChart21();
    this.bzt1();
    this.bzt2();

    setTimeout(() => {
      this.drawChart12();
      this.drawChart122();
      this.drawChart123();
      this.drawChart124();
      this.drawChart125();
      this.drawChart126();
    }, 10);

    this.tbodylist11 = this.tbodylist.slice(Math.random() * 1);
    this.tbodylist12 = this.tbodylist1.slice(Math.random() * 1);

    setInterval(() => {
      this.zptdz47s += 2311;
      this.zptdz47sle += 375;
      (this.zptdz47125 += 625),
        (this.zptdz47le125 += 74),
        (this.zptcjx2s += 1090),
        (this.zptcdc19s += 45),
        (this.tbodylist11 = this.tbodylist.slice(Math.random() * 2));
      this.tbodylist12 = this.tbodylist1.slice(Math.random() * 2);

      this.fpy_zd = Math.round(Math.random() * 34 + 923) / 10;
      this.fpy_gk = Math.round(Math.random() * 32 + 913) / 10;
      this.fpy_bj = Math.round(Math.random() * 17 + 953) / 10;

      this.oee_zd = Math.round(Math.random() * 5 + 85) / 100;
      this.oee_gk = Math.round(Math.random() * 6 + 87) / 100;
      this.oee_bj = Math.round(Math.random() * 3 + 88) / 100;

      this.mdr_arr = [
        Math.round(Math.random() * 5000 + 52000),
        Math.round(Math.random() * 2000 + 45000),
        Math.round(Math.random() * 3000 + 32000),
      ];

      let date = new Date().getDate();
      if (date != localStorage.getItem("date")) {
        this.lsny_nhdzl += 35469;
        this.lsny_lsdl += 5537;
        this.lsny_dyhdl += 34050;
        this.lsny_dylsdl += 5537;

        this.list[1].num = Math.round(Math.random() * 30 + 180);
      }

      this.drawChart();
      this.drawChart1();
      this.drawChart2();
      this.drawChart3();
      this.drawChart4();
      this.drawChart5();
      this.drawChart6();
      this.drawChart7();
      this.drawChart8();
      this.drawChart9();
      this.drawChart10();
      this.drawChart11();
      this.drawChart12();
      this.drawChart122();
      this.drawChart123();
      this.drawChart124();
      this.drawChart125();
      this.drawChart126();

      this.drawChart13();
      this.drawChart14();
      this.drawChart15();
      this.drawChart16();
      // this.drawChart17();
      this.drawChart19();
      this.drawChart20();
      this.drawChart21();
      this.bzt1();
      this.bzt2();
    }, 1000 * 60 * 10);
    setInterval(() => {
      this.list[0].num = Math.round(Math.random() * 13 + 35);
      this.list[2].num += 23;
      this.list[5].num += 1;

      this.ddwcl_zd = Math.round(Math.random() * 5 + 90);
      this.ddwcl_gk = Math.round(Math.random() * 5 + 90);
      this.ddwcl_bj = Math.round(Math.random() * 5 + 90);
    }, 1000 * 60 * 60);
  },
  methods: {
    GetDateStr(AddDayCount) {
      var dd = new Date();
      dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
      var y = dd.getFullYear();
      var m =
        dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1; //获取当前月份的日期，不足10补0
      var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); //获取当前几号，不足10补0
      let str = y + "-" + m + "-" + d;
      let arr = str.split("-").slice(1).join("/");
      return arr;
    },
    // 温湿度
    bzt1() {
      const myCharts = this.$echarts.init(this.$refs.myCharts);
      function getParametricEquation(
        startRatio,
        endRatio,
        isSelected,
        isHovered,
        k,
        height
      ) {
        let midRatio = (startRatio + endRatio) / 2;

        let startRadian = startRatio * Math.PI * 2;
        let endRadian = endRatio * Math.PI * 2;
        let midRadian = midRatio * Math.PI * 2;

        // 如果只有一个扇形，则不实现选中效果。
        if (startRatio === 0 && endRatio === 1) {
          isSelected = false;
        }

        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
        k = typeof k !== "undefined" ? k : 1 / 3;

        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

        // 计算高亮效果的放大比例（未高亮，则比例为 1）
        let hoverRate = isHovered ? 1.05 : 1;

        // 返回曲面参数方程
        return {
          u: {
            min: -Math.PI,
            max: Math.PI * 3,
            step: Math.PI / 32,
          },

          v: {
            min: 0,
            max: Math.PI * 2,
            step: Math.PI / 20,
          },

          x: function (u, v) {
            if (u < startRadian) {
              return (
                offsetX +
                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetX +
                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          y: function (u, v) {
            if (u < startRadian) {
              return (
                offsetY +
                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetY +
                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          z: function (u, v) {
            if (u < -Math.PI * 0.5) {
              return Math.sin(u);
            }
            if (u > Math.PI * 2.5) {
              return Math.sin(u);
            }
            return Math.sin(v) > 0 ? 1 * height : -1;
          },
        };
      }

      // 生成模拟 3D 饼图的配置项
      function getPie3D(pieData, internalDiameterRatio) {
        let series = [];
        let sumValue = 0;
        let startValue = 0;
        let endValue = 0;
        let legendData = [];
        let k =
          typeof internalDiameterRatio !== "undefined"
            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
            : 1 / 3;

        // 为每一个饼图数据，生成一个 series-surface 配置
        for (let i = 0; i < pieData.length; i++) {
          sumValue += pieData[i].value;

          let seriesItem = {
            name:
              typeof pieData[i].name === "undefined"
                ? `series${i}`
                : pieData[i].name,
            type: "surface",
            parametric: true,
            wireframe: {
              show: false,
            },
            pieData: pieData[i],
            pieStatus: {
              selected: false,
              hovered: false,
              k: k,
            },
          };

          if (typeof pieData[i].itemStyle != "undefined") {
            let itemStyle = {};

            typeof pieData[i].itemStyle.color != "undefined"
              ? (itemStyle.color = pieData[i].itemStyle.color)
              : null;
            typeof pieData[i].itemStyle.opacity != "undefined"
              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
              : null;

            seriesItem.itemStyle = itemStyle;
          }
          series.push(seriesItem);
        }

        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
        for (let i = 0; i < series.length; i++) {
          endValue = startValue + series[i].pieData.value;
          // console.log(series[i]);
          series[i].pieData.startRatio = startValue / sumValue;
          series[i].pieData.endRatio = endValue / sumValue;
          series[i].parametricEquation = getParametricEquation(
            series[i].pieData.startRatio,
            series[i].pieData.endRatio,
            false,
            false,
            k,
            series[i].pieData.value
          );

          startValue = endValue;

          legendData.push(series[i].name);
        }

        // 准备待返回的配置项，把准备好的 legendData、series 传入。
        let option = {
          tooltip: {
            formatter: (params) => {
              if (params.seriesName !== "mouseoutSeries") {
                return `${
                  params.seriesName
                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                  params.color
                };"></span>${
                  option.series[params.seriesIndex].pieData.value * 10
                }`;
              }
            },
          },
          xAxis3D: {
            min: -1,
            max: 1,
          },
          yAxis3D: {
            min: -1,
            max: 1,
          },
          zAxis3D: {
            min: -1,
            max: 1,
          },

          grid3D: {
            show: false,
            boxHeight: 20,
            top: "-15%",
            // bottom: '10%',
            environment: "auto", //背景色,auto为自适应颜色
            viewControl: {
              distance: 250,
              alpha: 30,
              beta: -70,
              rotateSensitivity: 0,
              zoomSensitivity: 0,
              panSensitivity: 0,
            },
          },
          series: series,
        };
        // console.log(option, "option");
        return option;
      }

      let option = getPie3D(
        [
          {
            name: "终端",
            value: 4.5,
            itemStyle: {
              opacity: 0.3,
              color: "rgb(167,205,142)",
            },
          },

          {
            name: "工控",
            value: 3,
            itemStyle: {
              opacity: 0.3,
              color: "rgb(196,191,228)",
            },
          },
          {
            name: "部件",
            value: 2.5,
            itemStyle: {
              opacity: 0.3,
              color: "rgb(253,198,74)",
            },
          },
        ],
        1.3
      );
      myCharts.setOption(option);
      option.series.push({
        name: "pie2d",
        type: "pie",
        labelLine: {
          length: 15,
        },
        label: {
          opacity: 1,
          formatter: "{c}rh",
        },
        startAngle: 60, //起始角度，支持范围[0, 360]。
        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["10%", "40%"],
        center: ["50%", "25%"],
        data: [
          {
            name: "终端",
            value: 45,
            itemStyle: {
              opacity: 0,
              color: "rgb(167,205,142)",
            },
          },

          {
            name: "工控",
            value: 30,
            itemStyle: {
              opacity: 0,
              color: "rgb(196,191,228)",
            },
          },
          {
            name: "部件",
            value: 25,
            itemStyle: {
              opacity: 0,
              color: "rgb(253,198,74)",
            },
          },
        ],
        itemStyle: {
          opacity: 0,
        },
      });
      myCharts.setOption(option);
    },
    bzt2() {
      const myCharts1 = this.$echarts.init(this.$refs.myCharts1);

      function getParametricEquation(
        startRatio,
        endRatio,
        isSelected,
        isHovered,
        k,
        height
      ) {
        // 计算
        // console.log("getParametricEquation")
        let midRatio = (startRatio + endRatio) / 2;

        let startRadian = startRatio * Math.PI * 2;
        let endRadian = endRatio * Math.PI * 2;
        let midRadian = midRatio * Math.PI * 2;

        // 如果只有一个扇形，则不实现选中效果。
        if (startRatio === 0 && endRatio === 1) {
          isSelected = false;
        }

        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
        k = typeof k !== "undefined" ? k : 1 / 3;

        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

        // 计算高亮效果的放大比例（未高亮，则比例为 1）
        let hoverRate = isHovered ? 1.05 : 1;

        // 返回曲面参数方程
        return {
          u: {
            min: -Math.PI,
            max: Math.PI * 3,
            step: Math.PI / 32,
          },

          v: {
            min: 0,
            max: Math.PI * 2,
            step: Math.PI / 20,
          },

          x: function (u, v) {
            if (u < startRadian) {
              return (
                offsetX +
                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetX +
                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          y: function (u, v) {
            if (u < startRadian) {
              return (
                offsetY +
                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetY +
                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          z: function (u, v) {
            if (u < -Math.PI * 0.5) {
              return Math.sin(u);
            }
            if (u > Math.PI * 2.5) {
              return Math.sin(u);
            }
            return Math.sin(v) > 0 ? 1 * height : -1;
          },
        };
      }

      // 生成模拟 3D 饼图的配置项
      function getPie3D(pieData, internalDiameterRatio) {
        let series = [];
        let sumValue = 0;
        let startValue = 0;
        let endValue = 0;
        let legendData = [];
        let k =
          typeof internalDiameterRatio !== "undefined"
            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
            : 1 / 3;

        // 为每一个饼图数据，生成一个 series-surface 配置
        for (let i = 0; i < pieData.length; i++) {
          sumValue += pieData[i].value;

          let seriesItem = {
            name:
              typeof pieData[i].name === "undefined"
                ? `series${i}`
                : pieData[i].name,
            type: "surface",
            parametric: true,
            wireframe: {
              show: false,
            },
            pieData: pieData[i],
            pieStatus: {
              selected: false,
              hovered: false,
              k: k,
            },
          };

          if (typeof pieData[i].itemStyle != "undefined") {
            let itemStyle = {};

            typeof pieData[i].itemStyle.color != "undefined"
              ? (itemStyle.color = pieData[i].itemStyle.color)
              : null;
            typeof pieData[i].itemStyle.opacity != "undefined"
              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
              : null;

            seriesItem.itemStyle = itemStyle;
          }
          series.push(seriesItem);
        }

        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
        for (let i = 0; i < series.length; i++) {
          endValue = startValue + series[i].pieData.value;
          // console.log(series[i]);
          series[i].pieData.startRatio = startValue / sumValue;
          series[i].pieData.endRatio = endValue / sumValue;
          series[i].parametricEquation = getParametricEquation(
            series[i].pieData.startRatio,
            series[i].pieData.endRatio,
            false,
            false,
            k,
            series[i].pieData.value
          );

          startValue = endValue;

          legendData.push(series[i].name);
        }

        // 准备待返回的配置项，把准备好的 legendData、series 传入。
        let option = {
          tooltip: {
            formatter: (params) => {
              if (params.seriesName !== "mouseoutSeries") {
                return `${
                  params.seriesName
                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                  params.color
                };"></span>${
                  option.series[params.seriesIndex].pieData.value * 20
                }`;
              }
            },
          },
          legend: {
            data: legendData,
            textStyle: {
              // color: 'black',
              fontSize: 15,
            },
            right: "right",
          },
          xAxis3D: {
            min: -1,
            max: 1,
          },
          yAxis3D: {
            min: -1,
            max: 1,
          },
          zAxis3D: {
            min: -1,
            max: 1,
          },

          grid3D: {
            show: false,
            boxHeight: 20,
            top: "-15%",
            left: "-20%",
            // bottom: '10%',
            environment: "auto", //背景色,auto为自适应颜色
            viewControl: {
              distance: 250,
              alpha: 30,
              beta: -70,
              rotateSensitivity: 0,
              zoomSensitivity: 0,
              panSensitivity: 0,
            },
          },
          series: series,
        };
        console.log(series);
        // console.log(option,"option") ;
        return option;
      }

      let option = getPie3D(
        [
          {
            name: "终端",
            value: 4.5,
            itemStyle: {
              opacity: 0.3,
              color: "rgb(167,205,142)",
            },
          },

          {
            name: "工控",
            value: 3,
            itemStyle: {
              opacity: 0.3,
              color: "rgb(196,191,228)",
            },
          },
          {
            name: "部件",
            value: 2.5,
            itemStyle: {
              opacity: 0.3,
              color: "rgb(253,198,74)",
            },
          },
        ],
        1.3
      );
      myCharts1.setOption(option);
      option.series.push({
        name: "pie2d",
        type: "pie",
        labelLine: {
          length: 15,
        },
        label: {
          opacity: 1,
          formatter: "{c}rh",
        },
        startAngle: 60, //起始角度，支持范围[0, 360]。
        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["10%", "30%"],
        center: ["35%", "25%"],
        data: [
          {
            name: "终端",
            value: 45,
            itemStyle: {
              opacity: 0,
              color: "rgb(167,205,142)",
            },
          },

          {
            name: "工控",
            value: 30,
            itemStyle: {
              opacity: 0,
              color: "rgb(196,191,228)",
            },
          },
          {
            name: "部件",
            value: 25,
            itemStyle: {
              opacity: 0,
              color: "rgb(253,198,74)",
            },
          },
        ],
        itemStyle: {
          opacity: 0,
        },
      });
      myCharts1.setOption(option);
    },
    // 安全
    // drawChart17() {
    //   let echart = this.$echarts.init(this.$refs.barCharts17);
    //   var colorList = [
    //     "rgb(246,83,71)",
    //     "rgb(251,167,38)",
    //     "rgb(253,215,60)",
    //     "rgb(176,226,224)",
    //     "rgb(166,209,162)",
    //   ];
    //   echart.setOption({
    //     legend: {
    //       data: [
    //         "安全生产天数",
    //         "未遂事件数",
    //         "急救事件数",
    //         "医疗事件数",
    //         "损工事件",
    //       ],
    //     },
    //     series: [
    //       {
    //         name: "金字塔",
    //         type: "funnel",
    //         // width: "30%",
    //         height: "60%",
    //         left: "50%",
    //         top: "20%",
    //         sort: "ascending",
    //         color: colorList,
    //         label: {
    //           show: false,
    //           position: "inside",
    //         },
    //         markLine: {
    //           symbol: "none",
    //           lineStyle: { type: "solid" },
    //           data: [
    //             [
    //               { x: "65%", y: "26%" },
    //               {
    //                 x: "85%",
    //                 y: "26%",
    //                 value: "0",
    //                 lineStyle: { color: colorList[0] },
    //               },
    //             ],
    //             [
    //               { x: "65%", y: "38%" },
    //               {
    //                 x: "85%",
    //                 y: "38%",
    //                 value: "0",
    //                 lineStyle: { color: colorList[1] },
    //               },
    //             ],
    //             [
    //               { x: "65%", y: "50%" },
    //               {
    //                 x: "85%",
    //                 y: "50%",
    //                 value: "0",
    //                 lineStyle: { color: colorList[2] },
    //               },
    //             ],
    //             [
    //               { x: "65%", y: "62%" },
    //               {
    //                 x: "85%",
    //                 y: "62%",
    //                 value: "0",
    //                 lineStyle: { color: colorList[3] },
    //               },
    //             ],
    //             [
    //               { x: "65%", y: "74%" },
    //               {
    //                 x: "85%",
    //                 y: "74%",
    //                 value: this.num,
    //                 lineStyle: { color: colorList[4] },
    //               },
    //             ],
    //           ],
    //         },
    //         data: [
    //           { value: 20, name: "损工事件" },
    //           { value: 40, name: "医疗事件数" },
    //           { value: 60, name: "急救事件数" },
    //           { value: 80, name: "未遂事件数" },
    //           { value: 100, name: "安全生产天数" },
    //         ],
    //       },
    //       {
    //         name: "",
    //         type: "funnel",
    //         width:"25%",
    //         height: "60%",
    //         left: "54%",
    //         top: "20%",
    //         sort: "ascending",
    //         color: colorList,
    //         label: {
    //           normal: {
    //             show: false,
    //             position: "inside",
    //             formatter: "{c}",
    //             textStyle: {
    //               color: "#fff",
    //             },
    //           },
    //           emphasis: {
    //             position: "inside",
    //             formatter: "{b}: {c}",
    //           },
    //         },
    //         itemStyle: {
    //           normal: {
    //             opacity: 1,
    //             borderColor: "rgba(9,20,36,0)",
    //             borderWidth: 0,
    //             shadowBlur: 7,
    //             shadowOffsetX: 4,
    //             shadowOffsetY: 0,
    //             shadowColor: "rgba(0, 0, 0, 1)",
    //           },
    //         },

    //         data: [
    //           { value: 20, name: "损工事件" },
    //           { value: 40, name: "医疗事件数" },
    //           { value: 60, name: "急救事件数" },
    //           { value: 80, name: "未遂事件数" },
    //           { value: 100, name: "安全生产天数" },
    //         ],
    //       },
    //     ],
    //   });
    //   window.onresize = echart.resize;
    // },
    // 订单完成率
    drawChart() {
      let echart = this.$echarts.init(this.$refs.barCharts);
      echart.setOption({
        series: [
          {
            type: "gauge", //仪表盘
            startAngle: 90,
            endAngle: -270,
            pointer: {
              //仪表盘指针
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(230,235,248)", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "rgb(246,202,88)", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "rgb(253,180,49)", // 100% 处的颜色
                },
              ],
            },
            progress: {
              //展示当前进度
              show: true,
              overlap: false, //多组数据时进度条是否重叠
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
              },
            },
            axisLine: {
              //仪表盘轴线相关配置
              lineStyle: {
                //仪表盘轴线样式
                width: 10,
              },
            },
            splitLine: {
              //分隔线样式
              show: false,
              distance: 0, //分隔线与轴线的距离
              length: 10,
            },
            axisTick: {
              //刻度样式
              show: false,
            },
            axisLabel: {
              //刻度标签
              show: false,
              distance: 40, //标签与刻度线的距离
            },
            data: [
              //系列中的数据内容数组
              {
                value: 42,
                name: "终端",
                title: {
                  //仪表盘标题
                  offsetCenter: ["0%", "-10%"],
                },
                detail: {
                  offsetCenter: ["0%", "35%"],
                },
              },
            ],
            title: {
              fontSize: 17,
            },
            detail: {
              //仪表盘详情，用于显示数据
              width: 50,
              height: 14,
              fontSize: 12,
              color: "black",
              // borderColor: "auto",
              // borderRadius: 20,
              // borderWidth: 1,
              formatter: "{value}%",
            },
          },
        ],
      });
      // setInterval(function () {
      //   // option.series[0].pointer.show = false;
      //   // option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
      //   echart.setOption(option, true);
      // }, 2000);
      window.onresize = echart.resize;
    },
    drawChart1() {
      let echart = this.$echarts.init(this.$refs.barCharts1);
      echart.setOption({
        series: [
          {
            type: "gauge", //仪表盘
            startAngle: 90,
            endAngle: -270,
            pointer: {
              //仪表盘指针
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(230,235,248)", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "rgb(165,216,217)", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "rgb(152,211,210)", // 100% 处的颜色
                },
              ],
            },
            progress: {
              //展示当前进度
              show: true,
              overlap: false, //多组数据时进度条是否重叠
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
              },
            },
            axisLine: {
              //仪表盘轴线相关配置
              lineStyle: {
                //仪表盘轴线样式
                width: 10,
              },
            },
            splitLine: {
              //分隔线样式
              show: false,
              distance: 0, //分隔线与轴线的距离
              length: 10,
            },
            axisTick: {
              //刻度样式
              show: false,
            },
            axisLabel: {
              //刻度标签
              show: false,
              distance: 40, //标签与刻度线的距离
            },
            data: [
              //系列中的数据内容数组
              {
                value: 42,
                name: "工控",
                title: {
                  //仪表盘标题
                  offsetCenter: ["0%", "-10%"],
                },
                detail: {
                  offsetCenter: ["0%", "35%"],
                },
              },
            ],
            title: {
              fontSize: 17,
            },
            detail: {
              //仪表盘详情，用于显示数据
              width: 50,
              height: 14,
              fontSize: 12,
              color: "black",
              // borderColor: "auto",
              // borderRadius: 20,
              // borderWidth: 1,
              formatter: "{value}%",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart2() {
      let echart = this.$echarts.init(this.$refs.barCharts2);
      echart.setOption({
        series: [
          {
            type: "gauge", //仪表盘
            startAngle: 90,
            endAngle: -270,
            pointer: {
              //仪表盘指针
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(230,235,248)", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "rgb(185,243,189)", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "rgb(174,244,246)", // 100% 处的颜色
                },
              ],
            },
            progress: {
              //展示当前进度
              show: true,
              overlap: false, //多组数据时进度条是否重叠
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
                borderColor: "#464646",
              },
            },
            axisLine: {
              //仪表盘轴线相关配置
              lineStyle: {
                //仪表盘轴线样式
                width: 10,
              },
            },
            splitLine: {
              //分隔线样式
              show: false,
              distance: 0, //分隔线与轴线的距离
              length: 10,
            },
            axisTick: {
              //刻度样式
              show: false,
            },
            axisLabel: {
              //刻度标签
              show: false,
              distance: 40, //标签与刻度线的距离
            },
            data: [
              //系列中的数据内容数组
              {
                value: 42,
                name: "部件",
                title: {
                  //仪表盘标题
                  offsetCenter: ["0%", "-10%"],
                },
                detail: {
                  offsetCenter: ["0%", "35%"],
                },
              },
            ],
            title: {
              fontSize: 17,
            },
            detail: {
              //仪表盘详情，用于显示数据
              width: 50,
              height: 14,
              fontSize: 12,
              color: "black",
              // borderColor: "auto",
              // borderRadius: 20,
              // borderWidth: 1,
              formatter: "{value}%",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    // 绿色能源
    drawChart3() {
      let echart = this.$echarts.init(this.$refs.barCharts3);
      echart.setOption({
        series: [
          {
            type: "gauge", //仪表盘
            startAngle: 90,
            endAngle: -270,
            pointer: {
              //仪表盘指针
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(230,235,248)", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "rgb(249,89,74)", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "red", // 100% 处的颜色
                },
              ],
            },
            progress: {
              //展示当前进度
              show: true,
              overlap: false, //多组数据时进度条是否重叠
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
              },
            },
            axisLine: {
              //仪表盘轴线相关配置
              lineStyle: {
                //仪表盘轴线样式
                width: 10,
              },
            },
            splitLine: {
              //分隔线样式
              show: false,
              distance: 0, //分隔线与轴线的距离
              length: 10,
            },
            axisTick: {
              //刻度样式
              show: false,
            },
            axisLabel: {
              //刻度标签
              show: false,
              distance: 40, //标签与刻度线的距离
            },
            data: [
              //系列中的数据内容数组
              {
                value: this.lsny_nhdzl,
                // name: "终端",
                // title: {
                //   //仪表盘标题
                //   offsetCenter: ["0%", "-10%"],
                // },
                detail: {
                  offsetCenter: ["0%", "5%"],
                },
              },
            ],
            title: {
              fontSize: 14,
            },
            detail: {
              //仪表盘详情，用于显示数据
              width: 50,
              height: 14,
              fontSize: 12,
              color: "black",
              formatter: "{value}",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart4() {
      let echart = this.$echarts.init(this.$refs.barCharts4);
      echart.setOption({
        series: [
          {
            type: "gauge", //仪表盘
            startAngle: 90,
            endAngle: -270,
            pointer: {
              //仪表盘指针
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(230,235,248)", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "rgb(196,239,220)", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "rgb(196,239,217)", // 100% 处的颜色
                },
              ],
            },
            progress: {
              //展示当前进度
              show: true,
              overlap: false, //多组数据时进度条是否重叠
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
              },
            },
            axisLine: {
              //仪表盘轴线相关配置
              lineStyle: {
                //仪表盘轴线样式
                width: 10,
              },
            },
            splitLine: {
              //分隔线样式
              show: false,
              distance: 0, //分隔线与轴线的距离
              length: 10,
            },
            axisTick: {
              //刻度样式
              show: false,
            },
            axisLabel: {
              //刻度标签
              show: false,
              distance: 40, //标签与刻度线的距离
            },
            data: [
              //系列中的数据内容数组
              {
                value: this.lsny_lsdl,
                // name: "终端",
                // title: {
                //   //仪表盘标题
                //   offsetCenter: ["0%", "-10%"],
                // },
                detail: {
                  offsetCenter: ["0%", "5%"],
                },
              },
            ],
            title: {
              fontSize: 14,
            },
            detail: {
              //仪表盘详情，用于显示数据
              width: 50,
              height: 14,
              fontSize: 12,
              color: "black",
              formatter: "{value}",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart5() {
      let echart = this.$echarts.init(this.$refs.barCharts5);
      echart.setOption({
        series: [
          {
            type: "gauge", //仪表盘
            startAngle: 90,
            endAngle: -270,
            pointer: {
              //仪表盘指针
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(230,235,248)", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "rgb(254,220,51)", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "yellow", // 100% 处的颜色
                },
              ],
            },
            progress: {
              //展示当前进度
              show: true,
              overlap: false, //多组数据时进度条是否重叠
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
              },
            },
            axisLine: {
              //仪表盘轴线相关配置
              lineStyle: {
                //仪表盘轴线样式
                width: 10,
              },
            },
            splitLine: {
              //分隔线样式
              show: false,
              distance: 0, //分隔线与轴线的距离
              length: 10,
            },
            axisTick: {
              //刻度样式
              show: false,
            },
            axisLabel: {
              //刻度标签
              show: false,
              distance: 40, //标签与刻度线的距离
            },
            data: [
              //系列中的数据内容数组
              {
                value: this.lsny_dyhdl,
                // name: "终端",
                // title: {
                //   //仪表盘标题
                //   offsetCenter: ["0%", "-10%"],
                // },
                detail: {
                  offsetCenter: ["0%", "5%"],
                },
              },
            ],
            title: {
              fontSize: 14,
            },
            detail: {
              //仪表盘详情，用于显示数据
              width: 50,
              height: 14,
              fontSize: 12,
              color: "black",
              // borderColor: "auto",
              // borderRadius: 20,
              // borderWidth: 1,
              formatter: "{value}",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart6() {
      let echart = this.$echarts.init(this.$refs.barCharts6);
      echart.setOption({
        series: [
          {
            type: "gauge", //仪表盘
            startAngle: 90,
            endAngle: -270,
            pointer: {
              //仪表盘指针
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(230,235,248)", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "rgb(185,243,189)", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "rgb(174,244,246)", // 100% 处的颜色
                },
              ],
            },
            progress: {
              //展示当前进度
              show: true,
              overlap: false, //多组数据时进度条是否重叠
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
              },
            },
            axisLine: {
              //仪表盘轴线相关配置
              lineStyle: {
                //仪表盘轴线样式
                width: 10,
              },
            },
            splitLine: {
              //分隔线样式
              show: false,
              distance: 0, //分隔线与轴线的距离
              length: 10,
            },
            axisTick: {
              //刻度样式
              show: false,
            },
            axisLabel: {
              //刻度标签
              show: false,
              distance: 40, //标签与刻度线的距离
            },
            data: [
              //系列中的数据内容数组
              {
                value: this.lsny_dylsdl,
                // name: "终端",
                // title: {
                //   //仪表盘标题
                //   offsetCenter: ["0%", "-10%"],
                // },
                detail: {
                  offsetCenter: ["0%", "5%"],
                },
              },
            ],
            title: {
              fontSize: 14,
            },
            detail: {
              //仪表盘详情，用于显示数据
              width: 50,
              height: 14,
              fontSize: 12,
              color: "black",
              // borderColor: "auto",
              // borderRadius: 20,
              // borderWidth: 1,
              formatter: "{value}",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart7() {
      let echart = this.$echarts.init(this.$refs.barCharts7);
      echart.setOption({
        series: [
          {
            type: "gauge", //仪表盘
            startAngle: 90,
            endAngle: -270,
            pointer: {
              //仪表盘指针
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(230,235,248)", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "rgb(165,216,217)", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "rgb(152,211,210)", // 100% 处的颜色
                },
              ],
            },
            progress: {
              //展示当前进度
              show: true,
              overlap: false, //多组数据时进度条是否重叠
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
              },
            },
            axisLine: {
              //仪表盘轴线相关配置
              lineStyle: {
                //仪表盘轴线样式
                width: 10,
              },
            },
            splitLine: {
              //分隔线样式
              show: false,
              distance: 0, //分隔线与轴线的距离
              length: 10,
            },
            axisTick: {
              //刻度样式
              show: false,
            },
            axisLabel: {
              //刻度标签
              show: false,
              distance: 40, //标签与刻度线的距离
            },
            data: [
              //系列中的数据内容数组
              {
                value: (this.lsny_lsdl / this.lsny_nhdzl).toFixed(2) * 100,
                // name: "终端",
                // title: {
                //   //仪表盘标题
                //   offsetCenter: ["0%", "-10%"],
                // },
                detail: {
                  offsetCenter: ["0%", "5%"],
                },
              },
            ],
            title: {
              fontSize: 14,
            },
            detail: {
              //仪表盘详情，用于显示数据
              width: 50,
              height: 14,
              fontSize: 12,
              color: "black",
              // borderColor: "auto",
              // borderRadius: 20,
              // borderWidth: 1,
              formatter: "{value}%",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    // 绿色能源叠加柱状图
    drawChart11() {
      var addarr1 = [],
        addarr2 = [];
      for (const k in this.lsny_arr1) {
        let e = this.lsny_arr1[k];
        addarr1[k] = e + this.lsny_arr2[k];
        addarr2[k] = this.lsny_arr3[k] + this.lsny_arr4[k];
      }

      var datearr = [];
      for (let i = 0; i < 7; i++) {
        let j = 0 - i;
        datearr.unshift(this.GetDateStr(j));
      }
      // console.log(datearr)
      let echart = this.$echarts.init(this.$refs.barCharts11);
      echart.setOption({
        tooltip: {
          show: false,
        },
        grid: {
          top: "35px",
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: datearr,
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: "k",
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: { show: true },
            axisLabel: {
              formatter: "{value}K",
            },
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: [0, 0, 28, 28],
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 1,
                      color: "rgb(167,241,288)", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "rgb(148,225,167)", // 60% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgb(36,204,70)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            stack: "广告",
            data: this.lsny_arr1,
          },
          {
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 1, color: "rgb(36,218,85)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["19", "10"],
            symbolPosition: "start",
            symbolOffset: ["-59%", 0],
            data: this.lsny_arr1,
            z: 3,
          },
          {
            name: "",
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: [28, 28, 0, 0],
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 1,
                      color: "rgb(241,211,201)", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "rgb(234,211,71)", // 60% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgb(246,159,43)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            stack: "广告",
            data: this.lsny_arr2,
          },
          {
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 1, color: "rgb(235,215,119)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["19", "10"],
            symbolPosition: "end",
            symbolOffset: ["-60%", "-10%"],
            data: addarr1,
            z: 3,
          },
          {
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 1, color: "rgb(238,161,55)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["19", "10"],
            symbolPosition: "end",
            symbolOffset: ["-59%", "-50%"],
            data: this.lsny_arr1,
            z: 3,
          },
          {
            name: "",
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: [0, 0, 28, 28],
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 1,
                      color: "rgb(199,246,230)", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "rgb(172,233,235)", // 60% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgb(146,224,202)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            stack: "搜索引擎",
            data: this.lsny_arr3,
          },
          {
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 1, color: "rgb(36,218,85)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["19", "10"],
            symbolPosition: "start",
            symbolOffset: ["60%", 0],
            data: this.lsny_arr1,
            z: 3,
          },
          {
            name: "",
            type: "bar",
            itemStyle: {
              normal: {
                // barBorderRadius: [28, 28,0, 0],
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 1,
                      color: "rgb(255,171,100)", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "rgb(1244,169,110)", // 60% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgb(236,116,31)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            stack: "搜索引擎",
            data: this.lsny_arr4,
          },
          {
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 1, color: "rgb(251,188,126)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["19", "10"],
            symbolPosition: "end",
            symbolOffset: ["60%", "-50%"],
            data: addarr2,
            z: 3,
          },
          {
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 1, color: "rgb(233,125,36)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["19", "10"],
            symbolPosition: "end",
            symbolOffset: ["60%", "-50%"],
            data: this.lsny_arr3,
            z: 3,
          },
        ],
      });
      window.onresize = echart.resize;
    },
    // FPY
    drawChart8() {
      let echart = this.$echarts.init(this.$refs.barCharts8);
      echart.setOption({
        series: [
          {
            type: "gauge", //仪表盘
            startAngle: 90,
            endAngle: -270,
            pointer: {
              //仪表盘指针
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(230,235,248)", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "rgb(246,202,88)", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "rgb(253,180,49)", // 100% 处的颜色
                },
              ],
            },
            progress: {
              //展示当前进度
              show: true,
              overlap: false, //多组数据时进度条是否重叠
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
              },
            },
            axisLine: {
              //仪表盘轴线相关配置
              lineStyle: {
                //仪表盘轴线样式
                width: 10,
              },
            },
            splitLine: {
              //分隔线样式
              show: false,
              distance: 0, //分隔线与轴线的距离
              length: 10,
            },
            axisTick: {
              //刻度样式
              show: false,
            },
            axisLabel: {
              //刻度标签
              show: false,
              distance: 40, //标签与刻度线的距离
            },
            data: [
              //系列中的数据内容数组
              {
                value: this.fpy_zd,
                // name: "终端",
                // title: {
                //   //仪表盘标题
                //   offsetCenter: ["0%", "-10%"],
                // },
                detail: {
                  offsetCenter: ["0%", "5%"],
                },
              },
            ],
            title: {
              fontSize: 17,
            },
            detail: {
              //仪表盘详情，用于显示数据
              width: 50,
              height: 14,
              fontSize: 20,
              color: "black",
              // borderColor: "auto",
              // borderRadius: 20,
              // borderWidth: 1,
              formatter: "{value}%",
            },
          },
        ],
      });
      // setInterval(function () {
      //   // option.series[0].pointer.show = false;
      //   // option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
      //   echart.setOption(option, true);
      // }, 2000);
      window.onresize = echart.resize;
    },
    drawChart9() {
      let echart = this.$echarts.init(this.$refs.barCharts9);
      echart.setOption({
        series: [
          {
            type: "gauge", //仪表盘
            startAngle: 90,
            endAngle: -270,
            pointer: {
              //仪表盘指针
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(230,235,248)", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "rgb(165,216,217)", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "rgb(152,211,210)", // 100% 处的颜色
                },
              ],
            },
            progress: {
              //展示当前进度
              show: true,
              overlap: false, //多组数据时进度条是否重叠
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
              },
            },
            axisLine: {
              //仪表盘轴线相关配置
              lineStyle: {
                //仪表盘轴线样式
                width: 10,
              },
            },
            splitLine: {
              //分隔线样式
              show: false,
              distance: 0, //分隔线与轴线的距离
              length: 10,
            },
            axisTick: {
              //刻度样式
              show: false,
            },
            axisLabel: {
              //刻度标签
              show: false,
              distance: 40, //标签与刻度线的距离
            },
            data: [
              //系列中的数据内容数组
              {
                value: this.fpy_gk,
                // name: "工控",
                // title: {
                //   //仪表盘标题
                //   offsetCenter: ["0%", "-10%"],
                // },
                detail: {
                  offsetCenter: ["0%", "5%"],
                },
              },
            ],
            title: {
              fontSize: 17,
            },
            detail: {
              //仪表盘详情，用于显示数据
              width: 50,
              height: 14,
              fontSize: 20,
              color: "black",
              // borderColor: "auto",
              // borderRadius: 20,
              // borderWidth: 1,
              formatter: "{value}%",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart10() {
      let echart = this.$echarts.init(this.$refs.barCharts10);
      echart.setOption({
        series: [
          {
            type: "gauge", //仪表盘
            startAngle: 90,
            endAngle: -270,
            pointer: {
              //仪表盘指针
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(230,235,248)", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "rgb(185,243,189)", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "rgb(174,244,246)", // 100% 处的颜色
                },
              ],
            },
            progress: {
              //展示当前进度
              show: true,
              overlap: false, //多组数据时进度条是否重叠
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
                borderColor: "#464646",
              },
            },
            axisLine: {
              //仪表盘轴线相关配置
              lineStyle: {
                //仪表盘轴线样式
                width: 10,
              },
            },
            splitLine: {
              //分隔线样式
              show: false,
              distance: 0, //分隔线与轴线的距离
              length: 10,
            },
            axisTick: {
              //刻度样式
              show: false,
            },
            axisLabel: {
              //刻度标签
              show: false,
              distance: 40, //标签与刻度线的距离
            },
            data: [
              //系列中的数据内容数组
              {
                value: this.fpy_bj,
                // name: "部件",
                // title: {
                //   //仪表盘标题
                //   offsetCenter: ["0%", "-10%"],
                // },
                detail: {
                  offsetCenter: ["0%", "5%"],
                },
              },
            ],
            title: {
              fontSize: 17,
            },
            detail: {
              //仪表盘详情，用于显示数据
              width: 50,
              height: 14,
              fontSize: 20,
              color: "black",
              // borderColor: "auto",
              // borderRadius: 20,
              // borderWidth: 1,
              formatter: "{value}%",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    // 主平台产出数
    drawChart12() {
      var datearr = [];
      for (let i = 0; i < 7; i++) {
        let j = 0 - i;
        datearr.unshift(this.GetDateStr(j));
      }
      let echart = this.$echarts.init(this.$refs.barCharts12);
      echart.setOption({
        grid: {
          top: "70px",
          left: "3%",
          right: "0",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: datearr,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "K",
            // min: 0,
            // max: 400,
            // interval: 100,
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: { show: false },
            axisLine: { show: true },
          },
          {
            type: "value",
            name: "温度",
            // min: 0,
            // max: 400,
            // interval: 100,
            axisLabel: {
              formatter: "{value} °C",
            },
            show: false,
          },
        ],
        series: [
          {
            // name: "蒸发量",
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 28,
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 1,
                      color: "rgb(199,246,230)", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "rgb(172,233,235)", // 60% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgb(146,224,202)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },

            data: [
              302966,
              307139,
              275745,
              274558,
              324867,
              315379,
              this.zptdz47s,
            ],
          },
          {
            name: "a",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(153,229,195)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "end",
            data: [
              302966,
              307139,
              275745,
              274558,
              324867,
              315379,
              this.zptdz47s < 15000 ? null : this.zptdz47s,
            ],
            z: 3,
          },
          {
            name: "b",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(32,209,90)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "start",
            data: [
              302966,
              307139,
              275745,
              274558,
              324867,
              315379,
              this.zptdz47s,
            ],
            z: 3,
          },
          {
            // name: "平均温度",
            type: "line",
            yAxisIndex: 1,
            color: "rgb(229,94,116)",
            data: [305000, 305000, 305000, 305000, 305000, 305000, 305000],
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart122() {
      var datearr = [];
      for (let i = 0; i < 7; i++) {
        let j = 0 - i;
        datearr.unshift(this.GetDateStr(j));
      }
      let echart = this.$echarts.init(this.$refs.barCharts122);
      echart.setOption({
        grid: {
          top: "70px",
          left: "3%",
          right: "0",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: datearr,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "K",
            // min: 0,
            // max: 400,
            // interval: 100,
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: { show: false },
            axisLine: { show: true },
          },
          {
            type: "value",
            name: "温度",
            // min: 0,
            // max: 400,
            // interval: 100,
            axisLabel: {
              formatter: "{value} °C",
            },
            show: false,
          },
        ],
        series: [
          {
            // name: "蒸发量",
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 28,
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 1,
                      color: "rgb(199,246,230)", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "rgb(172,233,235)", // 60% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgb(146,224,202)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },

            data: [44353, 43875, 47234, 42021, 41371, 44904, this.zptdz47sle],
          },
          {
            name: "a",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(153,229,195)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "end",
            data: [
              44353,
              43875,
              47234,
              42021,
              41371,
              44904,
              this.zptdz47sle < 15000 ? null : this.zptdz47sle,
            ],
            z: 3,
          },
          {
            name: "b",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(32,209,90)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "start",
            data: [44353, 43875, 47234, 42021, 41371, 44904, this.zptdz47sle],
            z: 3,
          },
          {
            // name: "平均温度",
            type: "line",
            yAxisIndex: 1,
            color: "rgb(229,94,116)",
            data: [45000, 45000, 45000, 45000, 45000, 45000, 45000],
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart123() {
      var datearr = [];
      for (let i = 0; i < 7; i++) {
        let j = 0 - i;
        datearr.unshift(this.GetDateStr(j));
      }
      let echart = this.$echarts.init(this.$refs.barCharts123);
      echart.setOption({
        grid: {
          top: "70px",
          left: "3%",
          right: "0",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: datearr,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "K",
            // min: 0,
            // max: 400,
            // interval: 100,
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: { show: false },
            axisLine: { show: true },
          },
          {
            type: "value",
            name: "温度",
            // min: 0,
            // max: 400,
            // interval: 100,
            axisLabel: {
              formatter: "{value} °C",
            },
            show: false,
          },
        ],
        series: [
          {
            // name: "蒸发量",
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              normal: {
                barBorderRadius: 28,
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 1,
                      color: "rgb(199,246,230)", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "rgb(172,233,235)", // 60% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgb(146,224,202)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },

            data: [73138, 78696, 75690, 77887, 80620, 75783, this.zptdz47125],
          },
          {
            name: "a",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(153,229,195)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "end",
            data: [
              73138,
              78696,
              75690,
              77887,
              80620,
              75783,
              this.zptdz47125 < 15000 ? null : this.zptdz47125,
            ],
            z: 3,
          },
          {
            name: "b",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(32,209,90)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "start",
            data: [73138, 78696, 75690, 77887, 80620, 75783, this.zptdz47125],
            z: 3,
          },
          {
            // name: "平均温度",
            type: "line",
            yAxisIndex: 1,
            color: "rgb(229,94,116)",
            data: [75000, 75000, 75000, 75000, 75000, 75000, 75000],
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart124() {
      var datearr = [];
      for (let i = 0; i < 7; i++) {
        let j = 0 - i;
        datearr.unshift(this.GetDateStr(j));
      }
      let echart = this.$echarts.init(this.$refs.barCharts124);
      echart.setOption({
        grid: {
          top: "70px",
          left: "3%",
          right: "0",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: datearr,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "K",
            // min: 0,
            // max: 400,
            // interval: 100,
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: { show: false },
            axisLine: { show: true },
          },
          {
            type: "value",
            name: "温度",
            // min: 0,
            // max: 400,
            // interval: 100,
            axisLabel: {
              formatter: "{value} °C",
            },
            show: false,
          },
        ],
        series: [
          {
            // name: "蒸发量",
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              normal: {
                barBorderRadius: 28,
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 1,
                      color: "rgb(199,246,230)", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "rgb(172,233,235)", // 60% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgb(146,224,202)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },

            data: [8537, 8197, 8700, 7237, 8002, 8649, this.zptdz47le125],
          },
          {
            name: "a",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(153,229,195)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "end",
            data: [
              8537,
              8197,
              8700,
              7237,
              8002,
              8649,
              this.zptdz47le125 < 15000 ? null : this.zptdz47le125,
            ],
            z: 3,
          },
          {
            name: "b",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(32,209,90)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "start",
            data: [8537, 8197, 8700, 7237, 8002, 8649, this.zptdz47le125],
            z: 3,
          },
          {
            // name: "平均温度",
            type: "line",
            yAxisIndex: 1,
            color: "rgb(229,94,116)",
            data: [8000, 8000, 8000, 8000, 8000, 8000, 8000],
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart125() {
      var datearr = [];
      for (let i = 0; i < 7; i++) {
        let j = 0 - i;
        datearr.unshift(this.GetDateStr(j));
      }
      let echart = this.$echarts.init(this.$refs.barCharts125);
      echart.setOption({
        grid: {
          top: "70px",
          left: "3%",
          right: "0",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: datearr,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "K",
            // min: 0,
            // max: 400,
            // interval: 100,
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: { show: false },
            axisLine: { show: true },
          },
          {
            type: "value",
            name: "温度",
            // min: 0,
            // max: 400,
            // interval: 100,
            axisLabel: {
              formatter: "{value} °C",
            },
            show: false,
          },
        ],
        series: [
          {
            // name: "蒸发量",
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              normal: {
                barBorderRadius: 28,
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 1,
                      color: "rgb(199,246,230)", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "rgb(172,233,235)", // 60% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgb(146,224,202)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },

            data: [84992, 91072, 79106, 87149, 86469, 82036, this.zptcjx2s],
          },
          {
            name: "a",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(153,229,195)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "end",
            data: [
              84992,
              91072,
              79106,
              87149,
              86469,
              82036,
              this.zptcjx2s < 15000 ? null : this.zptcjx2s,
            ],
            z: 3,
          },
          {
            name: "b",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(32,209,90)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "start",
            data: [84992, 91072, 79106, 87149, 86469, 82036, this.zptcjx2s],
            z: 3,
          },
          {
            // name: "平均温度",
            type: "line",
            yAxisIndex: 1,
            color: "rgb(229,94,116)",
            data: [85000, 85000, 85000, 85000, 85000, 85000, 85000],
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart126() {
      var datearr = [];
      for (let i = 0; i < 7; i++) {
        let j = 0 - i;
        datearr.unshift(this.GetDateStr(j));
      }
      let echart = this.$echarts.init(this.$refs.barCharts126);
      echart.setOption({
        grid: {
          top: "70px",
          left: "3%",
          right: "0",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: datearr,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "K",
            // min: 0,
            // max: 400,
            // interval: 100,
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: { show: false },
            axisLine: { show: true },
          },
          {
            type: "value",
            name: "温度",
            // min: 0,
            // max: 400,
            // interval: 100,
            axisLabel: {
              formatter: "{value} °C",
            },
            show: false,
          },
        ],
        series: [
          {
            // name: "蒸发量",
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              normal: {
                barBorderRadius: 28,
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 1,
                      color: "rgb(199,246,230)", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "rgb(172,233,235)", // 60% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgb(146,224,202)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },

            data: [2863, 2709, 3108, 2807, 2900, 2706, this.zptcdc19s],
          },
          {
            name: "a",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(153,229,195)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "end",
            data: [
              2863,
              2709,
              3108,
              2807,
              2900,
              2706,
              this.zptcdc19s < 15000 ? null : this.zptcdc19s,
            ],
            z: 3,
          },
          {
            name: "b",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(32,209,90)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "start",
            data: [2863, 2709, 3108, 2807, 2900, 2706, this.zptcdc19s],
            z: 3,
          },
          {
            // name: "平均温度",
            type: "line",
            yAxisIndex: 1,
            color: "rgb(229,94,116)",
            data: [3000, 3000, 3000, 3000, 3000, 3000, 3000],
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    // MDR
    drawChart13() {
      let echart = this.$echarts.init(this.$refs.barCharts13);
      echart.setOption({
        grid: {
          top: "20px",
          left: "3%",
          right: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["终端", "工控", "部件"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: "K",
            min: 0,
            max: 90000,
            interval: 30000,
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: { show: false },
            axisLine: { show: true },
          },
        ],
        series: [
          {
            // name: "蒸发量",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 28,
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 1,
                      color: "rgb(199,246,230)", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "rgb(172,233,235)", // 60% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgb(146,224,202)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },

            data: this.mdr_arr,
          },
          {
            name: "a",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(153,229,195)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "end",
            data: this.mdr_arr,
            z: 3,
          },
          {
            name: "b",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // {offset: 0, color: '#2bc6dd'},
                  { offset: 1, color: "rgb(32,209,90)" },
                ]),
                borderWidth: 1,
                borderColor: "#18CEE2",
              },
            },
            symbol: "circle",
            symbolSize: ["20", "10"],
            symbolPosition: "start",
            data: this.mdr_arr,
            z: 3,
          },
        ],
      });
      window.onresize = echart.resize;
    },
    // OEE
    drawChart161() {
      let echart = this.$echarts.init(this.$refs.barCharts161);
      echart.setOption({
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: -5,
            pointer: {
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "#0886d3", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "#32fecb", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "#b3ff47", // 100% 处的颜色
                },
              ],
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
                borderColor: "#ffa099",
              },
            },
            axisLine: {
              lineStyle: {
                width: 8,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: this.oee_bj * 100,
                title: {
                  offsetCenter: ["10%", "10%"],
                },
                detail: {
                  offsetCenter: ["0%", "10%"],
                },
              },
            ],
            title: {
              fontSize: 14,
            },
            detail: {
              show: false,
              width: 50,
              height: 14,
              fontSize: 14,
              color: "auto",
              borderColor: "auto",
              borderRadius: 20,
              borderWidth: 1,
              formatter: "{value}%",
            },
          },
        ],
      });
    },
    drawChart151() {
      let echart = this.$echarts.init(this.$refs.barCharts151);
      echart.setOption({
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: -5,
            pointer: {
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "#0886d3", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "#32fecb", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "#b3ff47", // 100% 处的颜色
                },
              ],
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
                borderColor: "#ffa099",
              },
            },
            axisLine: {
              lineStyle: {
                width: 8,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: this.oee_gk * 100,
                title: {
                  offsetCenter: ["10%", "10%"],
                },
                detail: {
                  offsetCenter: ["0%", "10%"],
                },
              },
            ],
            title: {
              fontSize: 14,
            },
            detail: {
              show: false,
              width: 50,
              height: 14,
              fontSize: 14,
              color: "auto",
              borderColor: "auto",
              borderRadius: 20,
              borderWidth: 1,
              formatter: "{value}%",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart141() {
      let echart = this.$echarts.init(this.$refs.barCharts141);
      echart.setOption({
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: -5,
            pointer: {
              show: false,
            },
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "#0886d3", // 0% 处的颜色
                },

                {
                  offset: 0.8,
                  color: "#32fecb", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "#b3ff47", // 100% 处的颜色
                },
              ],
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
                borderColor: "#ffa099",
              },
            },
            axisLine: {
              lineStyle: {
                width: 8,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: this.oee_zd * 100,
                title: {
                  offsetCenter: ["10%", "10%"],
                },
                detail: {
                  offsetCenter: ["0%", "10%"],
                },
              },
            ],
            title: {
              fontSize: 14,
            },
            detail: {
              show: false,
              width: 50,
              height: 14,
              fontSize: 14,
              color: "auto",
              borderColor: "auto",
              borderRadius: 20,
              borderWidth: 1,
              formatter: "{value}%",
            },
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart14() {
      let echart = this.$echarts.init(this.$refs.barCharts14);
      echart.setOption({
        series: [
          {
            radius: "100%",
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 1,
            splitNumber: 5,
            axisLine: {
              show: false,
              lineStyle: {
                width: 6,
                color: [
                  [0.25, "#FF6E76"],
                  [0.5, "#FDDD60"],
                  [0.75, "#58D9F9"],
                  [1, "#7CFFB2"],
                ],
              },
            },
            pointer: {
              show: false,
              icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
              length: "12%",
              width: 6,
              offsetCenter: [0, "-40%"],
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              length: 8,
              lineStyle: {
                color: "#ffff",
                width: 3,
              },
            },
            splitLine: {
              length: 8,
              lineStyle: {
                color: "#ffff",
                width: 3,
              },
            },
            axisLabel: {
              show: true,
              color: "#464646",
              fontSize: 10,
              distance: 10,
              formatter: function (value) {
                if (value === 1) {
                  return "100";
                } else if (value === 0.5) {
                  return "50";
                } else if (value === 0) {
                  return "0";
                }
              },
            },
            title: {
              offsetCenter: [0, "-20%"],
              fontSize: 12,
            },
            detail: {
              fontSize: 15,
              offsetCenter: [0, "10%"],
              valueAnimation: true,
              formatter: function (value) {
                return Math.round(value * 100) + "%";
              },
              color: "black",
            },
            data: [
              {
                value: this.oee_zd,
                name: "终端",
              },
            ],
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart15() {
      let echart = this.$echarts.init(this.$refs.barCharts15);
      echart.setOption({
        series: [
          {
            radius: "100%",
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 1,
            splitNumber: 5,
            axisLine: {
              show: false,
              lineStyle: {
                width: 6,
                color: [
                  [0.25, "#FF6E76"],
                  [0.5, "#FDDD60"],
                  [0.75, "#58D9F9"],
                  [1, "#7CFFB2"],
                ],
              },
            },
            pointer: {
              show: false,
              icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
              length: "12%",
              width: 6,
              offsetCenter: [0, "-40%"],
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              length: 8,
              lineStyle: {
                color: "#ffff",
                width: 3,
              },
            },
            splitLine: {
              length: 8,
              lineStyle: {
                color: "#ffff",
                width: 3,
              },
            },
            axisLabel: {
              show: true,
              color: "#464646",
              fontSize: 10,
              distance: 10,
              formatter: function (value) {
                if (value === 1) {
                  return "100";
                } else if (value === 0.5) {
                  return "50";
                } else if (value === 0) {
                  return "0";
                }
              },
            },
            title: {
              offsetCenter: [0, "-20%"],
              fontSize: 12,
            },
            detail: {
              fontSize: 15,
              offsetCenter: [0, "10%"],
              valueAnimation: true,
              formatter: function (value) {
                return Math.round(value * 100) + "%";
              },
              color: "black",
            },
            data: [
              {
                value: this.oee_gk,
                name: "工控",
              },
            ],
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart16() {
      let echart = this.$echarts.init(this.$refs.barCharts16);
      echart.setOption({
        series: [
          {
            radius: "100%",
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 1,
            splitNumber: 5,
            axisLine: {
              show: false,
              lineStyle: {
                width: 6,
                color: [
                  [0.25, "#FF6E76"],
                  [0.5, "#FDDD60"],
                  [0.75, "#58D9F9"],
                  [1, "#7CFFB2"],
                ],
              },
            },
            pointer: {
              show: false,
              icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
              length: "12%",
              width: 6,
              offsetCenter: [0, "-40%"],
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              length: 8,
              lineStyle: {
                color: "#ffff",
                width: 3,
              },
            },
            splitLine: {
              length: 8,
              lineStyle: {
                color: "#ffff",
                width: 3,
              },
            },
            axisLabel: {
              show: true,
              color: "#464646",
              fontSize: 10,
              distance: 10,
              formatter: function (value) {
                if (value === 1) {
                  return "100";
                } else if (value === 0.5) {
                  return "50";
                } else if (value === 0) {
                  return "0";
                }
              },
            },
            title: {
              offsetCenter: [0, "-20%"],
              fontSize: 12,
            },
            detail: {
              fontSize: 15,
              offsetCenter: [0, "10%"],
              valueAnimation: true,
              formatter: function (value) {
                return Math.round(value * 100) + "%";
              },
              color: "black",
            },
            data: [
              {
                value: this.oee_bj,
                name: "部件",
              },
            ],
          },
        ],
      });
      window.onresize = echart.resize;
    },
    // 在岗人数
    drawChart19() {
      let echart = this.$echarts.init(this.$refs.barCharts19);
      var colorList = ["rgb(252,185,58)", "rgb(145,204,117)"];
      echart.setOption({
        graphic: {
          //图形中间文字
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "应到 719\n实际 713",
            textAlign: "center",
            fill: "#010101",
            fontSize: 10,
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            color: colorList,
            data: [
              { value: 735, name: "直接访问" },
              { value: 100, name: "视频广告" },
            ],
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart20() {
      let echart = this.$echarts.init(this.$refs.barCharts20);
      var colorList = ["rgb(252,185,58)", "rgb(145,204,117)"];
      echart.setOption({
        graphic: {
          //图形中间文字
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "应到 535\n实际 531",
            textAlign: "center",
            fill: "#010101",
            fontSize: 10,
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            color: colorList,
            data: [
              { value: 735, name: "直接访问" },
              { value: 100, name: "视频广告" },
            ],
          },
        ],
      });
      window.onresize = echart.resize;
    },
    drawChart21() {
      let echart = this.$echarts.init(this.$refs.barCharts21);
      var colorList = ["rgb(252,185,58)", "rgb(145,204,117)"];
      echart.setOption({
        graphic: {
          //图形中间文字
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "应到 243\n实际 241",
            textAlign: "center",
            fill: "#010101",
            fontSize: 10,
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            color: colorList,
            data: [
              { value: 735, name: "直接访问" },
              { value: 100, name: "视频广告" },
            ],
          },
        ],
      });
      window.onresize = echart.resize;
    },
  },
};
</script>

<style scoped>
.arrange {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.row1 {
  width: 25%;
  height: 1070px;
  display: flex;
  flex-direction: column;
}
.row2 {
  height: 1070px;
  width: 50%;
  margin: 0 10px;
}
.row3 {
  height: 1070px;
  width: 25%;
}
.row1_column1 {
  width: 100%;
  height: 33%;
  position: relative;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #888888;
}
.row1_column2 {
  width: 100%;
  height: 33%;
  border-radius: 10px;
  margin: 10px 0;
  box-shadow: 0px 0px 5px #888888;
}
.row1_column3 {
  width: 100%;
  height: 33%;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #888888;
}
.row2_column1 {
  width: 100%;
  height: 66.4%;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #888888;
}
.row2_column2 {
  width: 100%;
  height: 32.6%;
  display: flex;
  flex-direction: row;
}
.row3_column1 {
  width: 100%;
  height: 32.8%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.row3_column2 {
  width: 100%;
  height: 32.6%;
  border-radius: 10px;
  margin: 10px 0;
}
.row3_column3 {
  width: 100%;
  height: 32.6%;
  border-radius: 10px;
}
.column1 {
  width: 100%;
  height: 48.5%;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0px 0px 5px #888888;
}
.column2 {
  width: 100%;
  height: 48.5%;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #888888;
}
.safety {
  display: flex;
  flex-direction: row;
  width: 30%;
  padding-left: 12px;
  padding-top: 10px;
  align-items: center;
}
.safety span {
  padding-left: 10px;
  font-weight: 700;
}
.energy {
  display: flex;
  flex-direction: row;
  width: 50%;
  padding-left: 12px;
  padding-top: 10px;
  align-items: center;
}
.energy span {
  padding-left: 10px;
  font-weight: 700;
}
.vehicle {
  display: flex;
  flex-direction: row;
  width: 50%;
  padding-left: 12px;
  padding-top: 10px;
  align-items: center;
}
.vehicle span {
  padding-left: 10px;
  font-weight: 700;
}
.chanchu {
  width: 50%;
  height: 100%;
  margin-right: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #888888;
}
.chanchu1 {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
}
.wanchenglv {
  width: 100%;
  height: 50%;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #888888;
}
.yichang {
  width: 100%;
  height: 50%;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #888888;
}
.output {
  display: flex;
  flex-direction: row;
  width: 50%;
  padding-left: 12px;
  padding-top: 10px;
  align-items: center;
}
.output span {
  padding-left: 10px;
  font-weight: 700;
}
.order {
  display: flex;
  flex-direction: row;
  width: 50%;
  padding-left: 12px;
  padding-top: 10px;
  align-items: center;
}
.order span {
  padding-left: 10px;
  font-weight: 700;
}
.abnormal {
  display: flex;
  flex-direction: row;
  width: 50%;
  padding-left: 12px;
  padding-top: 10px;
  align-items: center;
}
.abnormal span {
  padding-left: 10px;
  font-weight: 700;
}
.title {
  display: flex;
  flex-direction: row;
  width: 50%;
  padding-left: 12px;
  padding-top: 10px;
  align-items: center;
}
.title span {
  padding-left: 10px;
  font-weight: 700;
}
.car {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.card {
  position: relative;
  margin: 7px 10px;
  width: 45%;
}
.card img {
  width: 100%;
  height: 109%;
}
.text {
  position: absolute;
  top: 19px;
  left: 90px;
  text-align: center;
  color: #ffff;
  font-size: 15px;
  font-weight: 600;
}
.card:nth-child(odd) {
  margin-left: 0;
}
.table table {
  margin: 0 auto;
  width: 92%;
}
.table thead {
  background: rgb(194, 227, 198);
  color: #ffff;
  text-align: center;
}
.table thead td {
  white-space: nowrap;
}
.table tbody {
  text-align: center;
}
.line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 73px;
}
.table tbody tr:nth-child(odd) {
  background: rgb(247, 252, 246);
}
.state {
  color: red;
}
.state1 {
  color: rgb(255, 158, 14);
}
.state2 {
  color: rgb(246, 210, 21);
}
.dianliang {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.dianliang div {
  width: 25%;
  text-align: center;
  font-size: 13px;
}
.oee {
  display: flex;
  width: 100%;
  margin-top: -78px;
  justify-content: space-around;
}
.oee div {
  width: 20%;
  font-size: 15px;
  text-align: center;
}
.safe {
  position: absolute;
  top: 30%;
  left: 5%;
}
.safe table td {
  width: 20px;
  text-align: center;
  margin: 1px 1px;
  color: #ffff;
}
.safe table tr {
  display: flex;
  justify-content: center;
}
.temperature {
  display: flex;
  justify-content: center;
}
.tem {
  display: flex;
  justify-content: space-evenly;
  margin-top: -45px;
}
.tem div {
  width: 10%;
  text-align: center;
}
.people {
  display: flex;
  justify-content: center;
}
.peo {
  display: flex;
  justify-content: space-evenly;
  margin-top: -17px;
}
.peo div {
  width: 22%;
  text-align: center;
}
.image {
  width: 40%;
  height: 60%;
  position: absolute;
  top: 28%;
  left: 46%;
}
.image img {
  width: 100%;
  height: 100%;
}
.image_line {
  display: flex;
  align-items: center;
  position: absolute;
  width: 60%;
  left: 68%;
  top: 30%;
}
.image_line span {
  padding-left: 15px;
}
.image_line1 {
  display: flex;
  align-items: center;
  position: absolute;
  width: 60%;
  left: 68%;
  top: 41%;
}
.image_line1 span {
  padding-left: 15px;
}
.image_line2 {
  display: flex;
  align-items: center;
  position: absolute;
  width: 60%;
  left: 68%;
  top: 50%;
}
.image_line2 span {
  padding-left: 15px;
}
.image_line3 {
  display: flex;
  align-items: center;
  position: absolute;
  width: 46%;
  left: 72%;
  top: 60%;
}
.image_line3 span {
  padding-left: 15px;
}
.image_line4 {
  display: flex;
  align-items: center;
  position: absolute;
  width: 30%;
  left: 79%;
  top: 73%;
}
.image_line4 span {
  padding-left: 15px;
}
.image_class1 {
  width: 30%;
  border-bottom: 1px solid red;
}
.image_class2 {
  width: 30%;
  border-bottom: 1px solid rgb(254, 152, 0);
}
.image_class3 {
  width: 30%;
  border-bottom: 1px solid rgb(249, 211, 7);
}
.image_class4 {
  width: 30%;
  border-bottom: 1px solid rgb(133, 222, 208);
}
.image_class5 {
  width: 30%;
  border-bottom: 1px solid rgb(169, 215, 169);
}
.navigation {
  padding-left: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.nav1 {
  width: 30%;
  height: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.nav1 span {
  padding-left: 10px;
}
.circle1 {
  width: 13px;
  height: 13px;
  border-radius: 10px;
  background: red;
}
.circle2 {
  width: 13px;
  height: 13px;
  border-radius: 10px;
  background: rgb(254, 152, 0);
}
.circle3 {
  width: 13px;
  height: 13px;
  border-radius: 10px;
  background: rgb(249, 211, 7);
}
.circle4 {
  width: 13px;
  height: 13px;
  border-radius: 10px;
  background: rgb(133, 222, 208);
}
.circle5 {
  width: 13px;
  height: 13px;
  border-radius: 10px;
  background: rgb(169, 215, 169);
}
.box {
  position: relative;
  width: 50%;
}

.dizuo {
  position: absolute;
  width: 93px;
  height: 50px;
  background-color: rgb(153, 237, 243);
  border-radius: 50%;
  top: 37px;
  left: 53px;
  z-index: -99;
  box-shadow: 0 4px 0 rgb(43 173 182);
}

.dizuo1 {
  position: absolute;
  width: 93px;
  height: 50px;
  background-color: rgba(218, 152, 69, 0.4);
  border-radius: 50%;
  top: 37px;
  left: 28px;
  z-index: -99;
  box-shadow: 0 4px 0 rgb(172, 111, 37);
}
.neibu {
  position: relative;
  width: 33%;
}
.quan {
  position: absolute;
  width: 100px;
  height: 50px;
  top: 30px;
  left: 31px;
  overflow: hidden;
  z-index: -99;
}
.yuan {
  width: 90px;
  height: 87px;
  border-radius: 50%;
  border: 2px solid rgb(241, 222, 210);
}
.output_name {
  width: 100%;
  margin-bottom: -20px;
  text-align: center;
}
</style>
